<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="8" >
            <a-form-model-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createBy">
              <a-input v-model="model.createBy" placeholder="请输入创建人" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="创建人主键" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createById">
              <a-input v-model="model.createById" placeholder="请输入创建人主键" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <j-date placeholder="请选择创建日期" v-model="model.createTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="缩略图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image">
              <j-image-upload isMultiple :number=1 v-model="model.image" ></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" placeholder="请输入标题" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="栏目编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryCode">
              <a-input v-model="model.categoryCode" placeholder="请输入栏目编码" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="栏目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
  	          <j-tree-select
                ref="treeSelect"
                placeholder="请选择栏目"
                v-model="model.categoryId"
                dict="cms_category,category_name,id"
                pidValue="0"
                >
              </j-tree-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="moduleType">
              <j-dict-select-tag type="list" v-model="model.moduleType" dictCode="cms_article_type" placeholder="请选择类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="发布区域" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="orgCode">
              <j-select-depart v-model="model.orgCode" multi />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="来源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="source">
              <j-dict-select-tag type="radio" v-model="model.source" dictCode="cms_article_source" placeholder="请选择来源" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="来源出处" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="copyfrom">
              <a-input v-model="model.copyfrom" placeholder="请输入来源出处" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="关键字词" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="keywords">
              <a-input v-model="model.keywords" placeholder="请输入关键字词" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="外部链接" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="href">
              <a-input v-model="model.href" placeholder="请输入外部链接" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="标题颜色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="color">
              <a-input v-model="model.color" placeholder="请输入标题颜色" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="摘要" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="description">
              <a-textarea v-model="model.description" rows="4" placeholder="请输入摘要" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
              <a-input v-model="model.remarks" placeholder="请输入备注信息" ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="点赞数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hitsPlus">
              <a-input-number v-model="model.hitsPlus" placeholder="请输入点赞数" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="举报数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reports">
              <a-input-number v-model="model.reports" placeholder="请输入举报数" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="浏览数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pvs">
              <a-input-number v-model="model.pvs" placeholder="请输入浏览数" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="cms_article_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="文章详情" :key="refKeys[0]" :forceRender="true">
        <cms-article-data-form ref="cmsArticleDataForm" @validateError="validateError" :disabled="formDisabled"></cms-article-data-form>
      </a-tab-pane>
      
      <a-tab-pane tab="推荐位设置" :key="refKeys[1]" :forceRender="true">
        <cms-article-posid-form ref="cmsArticlePosidForm" @validateError="validateError" :disabled="formDisabled"></cms-article-posid-form>
      </a-tab-pane>
      
    </a-tabs>
  </a-spin>
</template>

<script>

  import { getAction } from '@/api/manage'
  import { FormTypes,getRefPromise,VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
  import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
  import { validateDuplicateValue } from '@/utils/util'
  import CmsArticleDataForm from './CmsArticleDataForm.vue'
  import CmsArticlePosidForm from './CmsArticlePosidForm.vue'

  export default {
    name: 'CmsArticleForm',
    mixins: [JEditableTableModelMixin],
    components: {
      CmsArticleDataForm,
      CmsArticlePosidForm,
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        labelCol2: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol2: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        model:{
            moduleType:"1",
            orgCode:"A01",
            source:"1",
            status:"0",
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
           title: [
              { required: true, message: '请输入标题!'},
           ],
           categoryId: [
              { required: true, message: '请输入栏目!'},
           ],
           description: [
              { required: true, message: '请输入摘要!'},
           ],
        },
        refKeys: ['cmsArticleData', 'cmsArticlePosid', ],
        tableKeys:[],
        activeKey: 'cmsArticleData',
        // 文章详情
        cmsArticleDataTable: {
          loading: false,
          dataSource: [],
          columns: [
          ]
        },
        // 推荐位设置
        cmsArticlePosidTable: {
          loading: false,
          dataSource: [],
          columns: [
          ]
        },
        url: {
          add: "/cms/cmsArticle/add",
          edit: "/cms/cmsArticle/edit",
          queryById: "/cms/cmsArticle/queryById",
          cmsArticleData: {
            list: '/cms/cmsArticle/queryCmsArticleDataByMainId'
          },
          cmsArticlePosid: {
            list: '/cms/cmsArticle/queryCmsArticlePosidByMainId'
          },
        }
      }
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
      addBefore(){
        this.$refs.cmsArticleDataForm.clearFormData()
        this.$refs.cmsArticlePosidForm.clearFormData()
      },
      getAllTable() {
        return new Promise(resolve => {
          resolve([]);
        })
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        this.$nextTick(() => {
          this.$refs.cmsArticleDataForm.initFormData(this.url.cmsArticleData.list,this.model.id)
          this.$refs.cmsArticlePosidForm.initFormData(this.url.cmsArticlePosid.list,this.model.id)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
        }
      },
      //校验所有一对一子表表单
      validateSubForm(allValues){
          return new Promise((resolve,reject)=>{
            Promise.all([
                this.$refs.cmsArticleDataForm.validate(0),
                this.$refs.cmsArticlePosidForm.validate(1),
            ]).then(() => {
              resolve(allValues)
            }).catch(e => {
              if (e.error === VALIDATE_NO_PASSED) {
                // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
                this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
              } else {
                console.error(e)
              }
            })
          })
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)
        return {
          ...main, // 展开
          cmsArticleDataList: this.$refs.cmsArticleDataForm.getFormData(),
          cmsArticlePosidList: this.$refs.cmsArticlePosidForm.getFormData(),
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },

    }
  }
</script>

<style scoped>
</style>